/**
 * create by young (young2f@outlook.com) on 2021/11/10
 */
'use strict';
import {Button, Form, Transfer} from 'antd';
import React from 'react';
import ComponentBase from '../../../components/Base/ComponentBase';
import {ModalFooter} from 'antd-extra';

const _ = require('lodash');
@Form.create()
export default class ModalAddQuicklyMenu extends ComponentBase {
  constructor(props) {
    super(props);
    this.state = {
      targetKeys: [],
      selectedKeys: [],
    };
  }

  componentDidMount() {
    const {quicklyMenus = []} = this.props;
    const targetKeys = [];
    quicklyMenus.map(item => {
      if (!item.isAdd) {
        targetKeys.push(item.path);
      }
    });
    this.setState({targetKeys, selectedKeys: [...targetKeys]});
  }

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({targetKeys: nextTargetKeys});
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]});
  };

  render() {
    const {menus, modalRef, callback} = this.props;
    console.log('menuss', menus);
    const dataSource = [];
    menus.map(item => {
      const {path, isAdd, title} = item;
      if (!isAdd) {
        item.key = path;
        dataSource.push(item);
      }
    });

    let {targetKeys, selectedKeys} = this.state;

    return <div>
      <Transfer
        listStyle={{
          width: 300,
          height: 640,
        }}
        dataSource={dataSource}
        titles={['未选菜单', '已选菜单']}
        targetKeys={targetKeys}
        selectedKeys={selectedKeys}
        onChange={this.handleChange}
        onSelectChange={this.handleSelectChange}
        render={item => item.title}
      />
      {<ModalFooter>
        <Button type="primary" onClick={() => {
          const {targetKeys} = this.state;
          const temp = [];
          targetKeys.map(key => {
            const item = _.find(menus, {key});
            item && temp.push(item);
          });
          callback && callback(temp);
          modalRef.close();
        }}>确定</Button>
        <Button onClick={() => {
          modalRef.close();
        }}>取消</Button>
      </ModalFooter>}
    </div>;
  }
}
